<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.tooltip - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

.ajp-tooltip > .middle img {
	margin-right: 10px;
	float: left;
}

#ex1 {
	margin-left: 90px;
	margin-top: 150px;
}

#ex2 {
	margin-left: 90px;
	margin-top: 150px;
}


#ex1 > li, #ex2 > li {
	background: #eee;
	border: 1px dashed #ccc;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	margin: 1em;
	display: block;
	float: left;
}

</style>

<script>

$(document).ready(function () {

	$('#ex1 > li').ajp$tooltip()

	$('#ex2 > li').ajp$tooltip({
		show: function ($t, x, y, $e) {
			if ($.browser.msie) {
				$t.css({ display: 'block', left: x, top: y - 30 }).animate({ top: y }, 'slow', 'swing')
			} else {
				$t.css({ opacity: 0, display: 'block', left: x, top: y - 30 }).animate({ opacity: 1, top: y }, 'slow', 'swing')
			}
		}
	})

})

</script>

</head>

<body>

	<ul id="ex1">
		<li data-ajp-tooltip="<img src=''/> Lorem ipsum dolor sit amet, ex per modo vidit ancillae, ei dolores evertitur usu.">box1</li>
		<li data-ajp-tooltip="<img src=''/> Magna graeci blandit mea in, has ut integre honestatis scripserit.">box2</li>
		<li data-ajp-tooltip="<img src=''/> Sea justo menandri an. Usu zril nominavi definiebas ea.">box3</li>
	</ul>

	<div class="clear"></div>

	<ul id="ex2">
		<li data-ajp-tooltip="<img src=''/> Lorem ipsum dolor sit amet, ex per modo vidit ancillae, ei dolores evertitur usu.">box1</li>
		<li data-ajp-tooltip="<img src=''/> Magna graeci blandit mea in, has ut integre honestatis scripserit.">box2</li>
		<li data-ajp-tooltip="<img src=''/> Sea justo menandri an. Usu zril nominavi definiebas ea.">box3</li>
	</ul>

	<div class="clear"></div>


</body>